<template>
  <div class="view">
    <div class="top"></div>
    <div class="main">
        <router-view />
    </div>
    <div class="footer">
      <div v-for="item in navList" :key="item.id" @click="link(item.path)">
          <!-- <img :src="$route.path == item.path ? item.img_hover : item.img" alt=""> -->
          <i class="iconfont" >{{item.icon}}</i>
          <span :class="$router.path == item.path ? 'active' : ''">{{item.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return {
      navList:[
        {
          id:"0001",
          path:"/home",
          icon:"&#xe6a1;",
          name:"书城"
        },{
          id:"0002",
          path:"/classify",             
          icon:"&#xe606;",
          name:"分类"
        },{
          id:"0003",
          path:"/welfare",
          icon:"&#xe62a;",
          name:"福利"
        },{
          id:"0004",
          path:"/bookcase",
          icon:"&#xe602;",
          name:"书架"
        },{
          id:"0005",
          path:"/mine",
          icon:"&#xe614;",
          name:"我的"
        }
      ]
    }
  },
  methods:{
    link(data){
      if(this.$router.path !== data){
        this.$router.push(data)
      }
    }
  }
}
</script>

<style scoped>
  .view{
    width: 100%;
    height: calc(100% - 1.733333rem);
  }

  .footer{
    width: 100%;
    height: 56px;
    background-color: #f5f5f5;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
  }
  .footer i{
    width: 30px;
    height: 30px;
  }
  .footer span{
    display: block;
    font-size: 13px;
  }
  .active{
    color: #0E9CFF;
  }
</style>